import QueryFilter from '@/components/QueryFilter';
import Toolbar from '@/components/Toolbar';
import useAntdList from '@/hooks/useAntdList';
import useAntdModal from '@/hooks/useAntdModal';
import { queryGateway } from '@/service/deliver';
import { formatDate } from '@/utils/utils';
import { PlusOutlined, PushpinOutlined } from '@ant-design/icons';
import { Button, Form, Tag ,Table, Tabs} from 'antd';
import { ColumnsType } from 'antd/lib/table';
import React from 'react';
import SaveGateway from './SaveGateway';
const GatewayPanel = () => {
  let [form] = Form.useForm()
  const { tableProps,tabsProps, search, refresh } = useAntdList(queryGateway, {tabsKey:'env',defaultTabsActiveKey:'dev', form })
  const saveGateway = useAntdModal({ refresh })
  // const { data } = useRequest(querySite)
  // useEffect(()=>{
  //    if(data){

  //    }
  // },[data])
  const { dataSource } = tableProps
  // console.log('datadata',data)
  const columns: ColumnsType<any> = [
  
    {
    title: '域名',
    dataIndex: 'host',
    render(_) {
      return <Tag color='green'>{_}</Tag>
    },
    onCell: (_: any, index: number) => {
      const host = _.host
      const i = dataSource.findIndex(v => v.host === host);
      let rowSpan = 0

      if (i === index) {
        rowSpan = dataSource.filter(v => v.host === host).length
      }
      return {
        rowSpan
      }
    },
    // render(_){
    //   return {
    //     children:_.host,
    //     colSpan:3
    //   }
    // }
  },{
    title: '名称',
    dataIndex: 'name'
  }, {
    title: '路径',
    dataIndex: 'path'
  }, {
    title: 'Group',
    dataIndex: 'group'
  },  {
    title: 'Data ID',
    dataIndex: 'dataId'
  }, {
    title: '创建时间',
    dataIndex: 'createdAt',
    render: (_) => formatDate(_)

  }, {
    title: '修改时间',
    dataIndex: 'updatedAt',
    render: (_) => formatDate(_)

  }, {
    title: '操作',
    render(_) {
      return <div>
        <Button onClick={() => saveGateway.openModal(_, { title: '编辑站点' })} type="link">编辑</Button>
      </div>
    }
  }
  ]
  return <div>

    <QueryFilter
      items={[{
        name: 'host',
        label: '域名',

      }, {
        name: 'path',
        label: '路径'
      }, {
        name: 'name',
        label: '名称'
      }]}
      form={form} submit={search.submit} reset={search.reset} >

    </QueryFilter>
    <Toolbar
      leftRender={
        <Button type='primary'  icon={<PlusOutlined />} onClick={() => saveGateway.openModal({
          env:tabsProps.activeKey
        }, { title: '新建站点' })}>新建站点</Button>
      }
    />
    <Tabs
    {...tabsProps}
    items={[{
      label:'开发环境',
      key:'dev'
    },{
      label:'测试环境',
      key:'test'
    },{
      label:'生产环境',
      key:'prod'
    }]}
    />
    
    <SaveGateway {...saveGateway} />
    <Table size='small'  rowKey='id' {...tableProps} columns={columns} />
  </div>
}
export default GatewayPanel